<template>
	<view class="container">
		<cc-navbar></cc-navbar>
		<u-sticky>
			<cc-scroll-view ref="ScrollViewRef" @change="handleClass" :list="classList"></cc-scroll-view>
		</u-sticky>
		<view class="list" v-if="count">
			<view class="list-item" v-for="(item, index) in list" :key="index" @tap="$onBlock">
				<view class="list-item-top fcb">
					<view class="flex-1 fc">
						<view class="class-name u-line-1 pr20">
							{{ item.class_name }}
						</view>
						<cc-classtime-icon :value="item" />
					</view>
					<u-icon name="arrow-right" size="26rpx"></u-icon>
				</view>
				<view class="list-item-content">
					<view class="list-item-info">
						<view class="font-info">排课规则</view>
						<view class="mr20">{{ item.rule_type === 2 ? '自由排课' : '重复排课' }}</view>
						<u-tag shape="circle" v-if="item.rule_type === 1" plain plainFill type="primary"
							:text="item.repeatType.label"></u-tag>
					</view>
					<view class="list-item-info">
						<view class="font-info">{{ item.rule_type === 2 ? '上课日期' : '上课星期' }}</view>
						<view v-if="item.rule_type === 2">{{ item.once_date_list || '-' }}</view>
						<view v-else>{{ item.week_day_name || '-' }}</view>
					</view>
				</view>
			</view>
		</view>
		<cc-loadmore :show-limit="7" :loading="loading" :current="list.length" :count="count" />
		<cc-empty v-if="!loading && !count" mode="list" />

		<cc-create-classrule />
	</view>
</template>

<script>
	import {
		classList
	} from '@/codecat/api/common.js';
	import {
		listRule
	} from '@/codecat/api/education/class/classTimeRule.js';
	export default {
		// 排课计划
		name: 'ClassRule',
		data() {
			return {
				loading: false,
				list: [],
				count: 0,
				query: {
					page: 1,
					limit: 10,
					cla_id: ''
				},
				classList: []
			};
		},
		onLoad() {
			const options = this.$Route.query;
			this.query.cla_id = options?.cla_id || '';
			this.getList(1);
			this.getClass();
		},
		onReachBottom() {
			if (this.list.length < this.count) {
				this.getList();
			}
		},
		methods: {
			handleClass(index) {
				this.query.cla_id = this.classList[index].value;
				uni.$u.debounce(this.getList(1), 300);
			},
			getClass() {
				classList().then((res) => {
					let classList = [{
						label: '全部',
						value: ''
					}];
					if (Array.isArray(res.data) && res.data.length) {
						res.data.map((e) => {
							classList.push({
								label: e.name,
								value: e.id
							});
						});
					}
					this.classList = classList;

					// 设置默认下标
					const claId = this.query.cla_id;
					if (!!claId) {
						const current = this.classList.findIndex((e) => e.value === parseFloat(claId));
						this.$nextTick(() => {
							this.$refs['ScrollViewRef'].setCurrent(current);
						});
					}
				});
			},
			getList(first) {
				const query = this.$lodash.cloneDeep(this.query);
				if (first) {
					query.page = 1;
					this.list = [];
					this.count = 0;
				} else {
					query.page += 1;
				}
				this.loading = true;
				listRule(query)
					.then((res) => {
						this.loading = false;
						this.query.page = query.page;
						const {
							count,
							list
						} = res.data;
						this.count = count || 0;
						if (Array.isArray(list) && list.length) {
							list.forEach((e) => {
								e.repeatType = this.$getDict('repeatTypeOptions', e.repeat_type);
							});
							this.list = this.list.concat(list);
						}
					})
					.catch((_) => {
						this.loading = false;
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>